﻿<div data-bind="with: product">
    <label>Title</label>
    <input type="text" data-bind="value: title" />
    <label>Image Url</label>
    <input type="text" data-bind="value: thumbUrl" />
    <label>id</label>
    <input type="text" data-bind="value: id" />
    <label>Tags</label>
    <div class="tag-editor">
        <ul data-bind="foreach: tags">
            <li>
                <a href="javascript:void(0)" data-bind="text: $data, href: $parents[1].getByTagUrl($data)"></a>
                <a class="close" href="javascript:void(0)" data-bind="click: $parent.removeTag">x</a>
            </li>
        </ul>
    </div>
    <input type="text" data-bind="value: $parent.newTag" />
    <a class="secondary button" data-bind="click: $parent.addNewTag">Add</a>
    <p>
        <label>Description</label>
        <textarea data-bind="value: shortDescription"></textarea>
    </p>
    <div class="row">
        <div class="large-3 columns">
            <a class="button red" href="javascript:void(0)" data-bind="click: $parent.removeProduct">Delete</a>
        </div>
        <div class="large-9 columns">
            <div class="right">
                <a class="button" data-bind="href: $parent.viewUrl">Cancel</a>
                <a class="button" href="javascript:void(0)" data-bind="click: $parent.submit">Submit</a>
            </div>
        </div>
    </div>

</div>
